<template>
  <div class="module">
    <div class="title">交易明细</div>
    <div class="content">
      <div class="top">
        <el-radio-group
          v-model="statisticsRadio1"
          size="mini"
          border="true"
          @change="statisticsRadio1Fn"
        >
          <el-radio-button label="P">买入</el-radio-button>
          <el-radio-button label="S">卖出</el-radio-button>
          <el-radio-button label="ALL">全部</el-radio-button>
        </el-radio-group>
        <el-radio-group
          v-model="statisticsRadio2"
          size="mini"
          border="true"
          style="margin-left: auto"
          @change="rankingRadio1Change"
        >
          <el-radio-button label="今年以来"></el-radio-button>
          <el-radio-button label="近一年"></el-radio-button>
          <el-radio-button label="近三年"></el-radio-button>
          <el-radio-button label="全部"></el-radio-button>
        </el-radio-group>
        <div style="margin-left: 10px">
          <el-date-picker
            v-model="datePicker"
            type="monthrange"
            range-separator="-"
            start-placeholder="开始"
            end-placeholder="结束"
            @change="datePickerChange"
          >
          </el-date-picker>
        </div>
      </div>
      <div>
        <span>交易大类&nbsp;</span>
        <el-select
          v-model="selectedValue"
          clearable
          placeholder="请选择"
          @change="selectedChange"
        >
          <el-option
            v-for="item in options"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          >
          </el-option>
        </el-select>
      </div>
      <div class="table">
        <el-table :data="dealTableData" style="width: 100%">
          <el-table-column
            prop="tradeId"
            label="交易ID"
            align="center"
          >
          </el-table-column>
          <el-table-column
            prop="tradeType"
            label="交易大类"
            align="center"
          >
          </el-table-column>
          <el-table-column
            prop="subTradeType"
            label="子交易类型"
            align="center"
          >
          </el-table-column>
          <el-table-column
            prop="productCode"
            label="产品代码"
            align="center"
          >
          </el-table-column>
          <el-table-column 
          prop="tradeDate" 
          label="交易日期" 
          align="center" 
          :formatter="dateFormatter">
          </el-table-column>
          <el-table-column 
          prop="valueDate" 
          label="起息日期" 
          align="center" 
          :formatter="dateFormatter">
          </el-table-column>
          <el-table-column 
          prop="maturityDate" 
          label="到期日期" 
          align="center" 
          :formatter="dateFormatter">
          </el-table-column>
          <el-table-column 
          prop="settleDate" 
          label="结算日期" 
          align="center" 
          :formatter="dateFormatter">
          </el-table-column>
          <el-table-column 
          prop="maturitySettleDate" 
          label=" 到期结算日期" 
          align="center" 
          :formatter="dateFormatter">
          </el-table-column>
          <el-table-column
            prop="tradeDirection"
            label="交易方向"
            align="center"
            :formatter="directionFormat"
          >
        </el-table-column>
          <el-table-column
            prop="tradeCurrencyCode"
            label="交易货币代码"
            align="center"
          >
          </el-table-column>
          <el-table-column
            prop="tradeQuantity"
            label="交易数量"
            align="center"
          >
          </el-table-column>
          <el-table-column
            prop="tradePrice"
            label="交易价格"
            align="center"
          >
          </el-table-column>
          <el-table-column
            prop="tradeAmount"
            label="交易金额 买入(亿)"
            align="center"
            :formatter="amountFormatter"
          >
          </el-table-column>
          <el-table-column
            prop="tradeAmount2"
            label="交易金额 卖出(亿)"
            align="center"
            :formatter="amountFormatter"
          >
          </el-table-column>
          <el-table-column
            prop="tradeDesc"
            label="交易描述"
            align="center"
          >
          </el-table-column>
        </el-table>
      </div>
    </div>
  </div>
</template>

<script>
import moment from 'moment';
import {
  getTradeTypes,
  getTradeInfoDetails,
} from '@/api/customerManagement/tradeInformation';
export default {
  data() {
    return {
      counterpartyId:'test01',
      dealTableData: [],
      selectedValue: '',
      datePicker: '',
      statisticsRadio1: 'P',
      statisticsRadio2: '今年以来',
      options: [],
      startDate: '',
      endDate: moment().format('YYYYMMDD'),
      customerId: '',
    }; 
  },
  mounted() {
    this.customerId = this.$route.query.customerId;
    this.getTradeTypesData();
    this.getTradeInfoDetailsData();
    this.rankingRadio1Change();
  },
  methods: {
    dateFormatter(row, column, cellValue, index) {
      var result = cellValue.substring(0,4) + '-' + cellValue.substring(4,6) + '-' + cellValue.substring(6,8)  
      return result;
    },
    amountFormatter(row, column, cellValue, index) {
      if (!isNaN(Number(cellValue))) {
        return Math.round(cellValue/100000000);
      } else {
        return '-';
      }
    },
    directionFormat(row, column, cellValue, index) {
      var directionText = '-';
      if(cellValue === 'P') {
        directionText = '买入';
      } else if (cellValue === 'S') {
        directionText = '卖出';
      }
      return directionText;
    },
    statisticsRadio2Fn(value = '今年以来') {
      const today = moment();
      switch (value) {
        case '今年以来':
          // 获取一年前的日期
          const YearAgo = today.startOf('years').format('YYYYMMDD');
          this.startDate = YearAgo;
          break;
        case '近一年':
          // 获取一年前的日期
          const oneYearAgo = today.subtract(1, 'years').format('YYYYMMDD');
          this.startDate = oneYearAgo;
          break;
        case '近三年':
          // 获取一年前的日期
          const threeYearAgo = today.subtract(3, 'years').format('YYYYMMDD');
          this.startDate = threeYearAgo;
          break;
        case '全部':
          this.startDate = '';
          this.endDate = '';
          break;
        default:
          break;
      }
      this.getTradeInfoDetailsData();
    },
    async statisticsRadio1Fn(value = 'P') {
      if (value === 'ALL') {
      this.statisticsRadio1 = '';
      }
      this.selectedValue = value
      this.getTradeInfoDetailsData();
    },
    async getTradeTypesData() {
      const { data } = await getTradeTypes();
      this.options = data.records.map((item) => {
        return {
          label: item,
          value: item,
        };
      });
    },
    async getTradeInfoDetailsData() {
      const params = {
        counterpartyId: this.customerId,
        tradeDirection: this.statisticsRadio1,
        startDate: this.startDate,
        endDate: this.endDate,
        tradeType: this.selectedValue,
      }
      const { data } = await getTradeInfoDetails(params);
      this.dealTableData = data.records;
    },
    selectedChange(val) {
      this.selectedValue = val;
      this.getTradeInfoDetailsData();
    },
    datePickerChange(date) {
      if (!date) return;
      this.startDate = moment(date[0]).format('YYYYMMDD');
      this.endDate = moment(date[1]).format('YYYYMMDD');
      this.statisticsRadio2 = '';
      this.getTradeInfoDetailsData()
    },
  },
};
</script>

<style lang="scss" scoped>
.module {
  padding: 14px;
}
.content {
  border: 1px solid #39517f;
  padding: 14px;
  .top {
    display: flex;
    align-items: center;
    margin-bottom: 10px;
  }
}
.group_table {
  display: flex;
  justify-content: space-around;
}
.title {
  line-height: 18px;
  border-left: 5px solid #08b0f0;
  padding-left: 16px;
  display: flex;
  justify-content: space-between;
  margin-bottom: 10px;
}
.table {
  margin-top: 10px;
  border: 1px solid #39517f;
}
.table_echarts {
  .pie_echarts {
    width: 100%;
  }
}
</style>
